<template>
	<!--顶部导航栏-->
	<view class="uni_tab_bar">
		<view class="uni_swiper_tab order_top">
			<block v-for="(tabBar, index) in tabBars" :key="index">
				<view class="swiper_tab_list" :class="{ active: tabIndex == tabBar.id }" @tap="toggleTab(tabBar.id)">
					{{ tabBar.name }}
					<view class="swiper_tab_line"> </view>
				</view>
			</block>
		</view>
	</view>
	<view class="order_centext">
		　　<swiper :current="tabIndex" @change="tabChange" class="order_centext">
			　　　　<swiper-item v-for="(content, index) in tabBars" :key="index">
				<view class="swiper_item">
					<view v-if="content.id == 0">
						<uni-forms ref="baseForm" :modelValue="baseFormData" label-width="90">
							<uni-forms-item label="请假类型">
								<view class="uni-form-item uni-column">
									<radio-group @change="onChangeRadio" v-model="baseFormData.type" class="radio-group"
										name="type">
										<label>
											<radio value="0" /><text>事假</text>
										</label>
										<label>
											<radio value="1" /><text>产假</text>
										</label>
										<label>
											<radio value="2" /><text>病假</text>
										</label>
									</radio-group>
								</view>
							</uni-forms-item>
							<uni-forms-item label="请假时间">
							</uni-forms-item>
							<uni-forms-item label="">
								<uni-datetime-picker @change="onDateChange" v-model="datetimerange" type="datetimerange"
									rangeSeparator="-" />
							</uni-forms-item>
							<!-- 							<uni-forms-item label="开始时间">
								<uni-datetime-picker type="datetime" @change="onStartTimeChange" return-type="timestamp"
									v-model="baseFormData.startTime" />
							</uni-forms-item>
							<uni-forms-item label="结束时间">
								<uni-datetime-picker type="datetime" @change="onEndTimeChange" return-type="timestamp"
									v-model="baseFormData.endTime" />
							</uni-forms-item> -->
							<uni-forms-item label="请假原因">
								<uni-easyinput class="white" type="textarea" v-model="baseFormData.reason"
									placeholder="请输入请假原因" />
							</uni-forms-item>
						</uni-forms>
						<button @click="submit" class="btn">提交</button>
					</view>
					<scroll-view class="scroll" v-if="content.id == 1">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
							@scrolltolower="lower" @scroll="scroll">
							<view v-for="(item,index) in myLeaveForms" :key="index" class="list-item">
								<uni-card class="card" :title="item.userName" :extra="statusArr[+item.status]">
									<text>申请类型：{{typeArr[+item.type]}}</text>
									<text>请假时间：{{item.startTime}}~{{item.endTime}}</text>
									<text>请假天数：{{item.days}}</text>
								</uni-card>
							</view>
							<br>
						</scroll-view>
						<uni-pagination @change="pageChange" class="pagination" pageSize="5"
							:current="pagination.current" :show-icon="true" :total="pagination.total" title="标题文字" />
					</scroll-view>
				</view>
				　　　　
			</swiper-item>
			　　</swiper>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="msgRef" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'
	import {
		result,
		formatTimeStamp
	} from '../../helpers/utils/index.js'
	import {
		Action,
		List
	} from '../../service/index.js'
	let myId = ''
	uni.getStorage({
		key: 'userInfo',
		success: function(res) {
			// console.log(res.data);
			myId = res.data.userId
		}
	});
	// console.log(myId)
	const baseFormData = reactive({
		type: '',
		startTime: '',
		endTime: '',
		reason: ''
	})
	// 分页器配置项
	const pagination = reactive({
		current: 1,
		total: 0,
		pageSize: 5
	})

	const myLeaveForms = ref([])
	const myApplyList = ref()
	const allList = ref()
	const getMyLeaveForms = async () => {
		const res = await List.getMyLeaveForms(1, 100, myId)
		result(res).success(({
			data
		}) => {
			// console.log(data)
			allList.value = [...data.records]
			pagination.total = data.total
			// 拿到第一页的数据
			myLeaveForms.value = allList.value.slice(0, 5)
		})
	}
	getMyLeaveForms()
	const pageChange = (e) => {
		// console.log(e.current)
		pagination.current = e.current
		let cur = e.current - 1
		myLeaveForms.value = allList.value.slice(cur * 5, cur * 5 + 5)
	}
	const tabBars = ref([{
			name: '发起申请',
			id: '0'
		},
		{
			name: '已申请列表',
			id: '1'
		},
	])
	const tabIndex = ref(0)
	const typeArr = ref(['事假', '产假', '病假'])
	const statusArr = ['待审核', '审核中', '已同意', '已拒绝', '已撤销']
	const toggleTab = (index) => {
		tabIndex.value = index
		pagination.current = 1
		// console.log(pagination.current)
	}
	const tabChange = (e) => {
		// const tabIndex = e.detail.current
		// tabIndex.value = tabIndex
		tabIndex.value = e.detail.current
		pagination.current = 1
	}
	// 弹窗相关
	const msgType = ref()
	const msgTypeArr = ['success', 'error']
	const messageText = ref('')
	const msgRef = ref()
	// 时间选择器
	const datetimerange = ref()
	const onDateChange = (e) => {
		baseFormData.startTime = e[0]
		baseFormData.endTime = e[1]
	}
	const onChangeRadio = (e) => {
		// console.log(e.detail.value)
		baseFormData.type = e.detail.value
	}
	const addLeaveForm = async () => {
		const res = await Action.addLeaveForm(myId, baseFormData.startTime, baseFormData.endTime, baseFormData
			.type, baseFormData.reason)
		result(res).success(({
			data
		}) => {
			msgType.value = 'success'
			messageText.value = '提交请假申请成功'
			msgRef.value.open()
			baseFormData.type = ''
			baseFormData.startTime=''
			baseFormData.endTime = ''
			baseFormData.reason = ''
			getMyLeaveForms()
			toggleTab(1)
			return
		})
	}
	const submit = () => {
		nextTick(() => {
			if (!baseFormData.type) {
				msgType.value = 'error'
				messageText.value = '请填写请假类型'
				msgRef.value.open()
				return
			}
			if (!baseFormData.startTime || !baseFormData.endTime) {
				msgType.value = 'error'
				messageText.value = '请选择请假时间'
				msgRef.value.open()
				return
			}
			if (!baseFormData.reason) {
				msgType.value = 'error'
				messageText.value = '请填写请假理由'
				msgRef.value.open()
				return
			}
			addLeaveForm()
		})
		return

	}
</script>

<style>
	.order_top {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: rgba(1, 1, 1, 0);
	}

	.swiper_tab_list {
		color: #888888;
		font-weight: bold;
	}

	.uni_tab_bar .active {
		color: #55aaff;
		margin-top: 17rpx;
	}

	.active .swiper_tab_line {
		border-bottom: 4rpx solid #55aaff;
		width: 50rpx;
		margin: auto;
		margin-top: 17rpx;
	}

	.uni_swiper_tab {
		border-bottom: 2rpx solid #eeeeee;
		margin-bottom: 15rpx;
	}

	.order_centext {
		height: 80%;
		position: fixed;
		top: 160rpx;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.swiper_item {
		padding: 7%;
	}

	.white {
		background-color: white;
	}

	.btn {
		transform: translateY(50%);
		width: 70%;
	}

	.scroll-Y {
		height: 900rpx;
	}


	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	text {
		display: block;
	}

	.pagination {
		margin-top: 20rpx;
	}

	.radio-group {
		display: flex;
		justify-content: space-evenly;
	}
</style>
